<template>
  <a-comment class="comment">
    <a slot="author" style="font-size: 15px">{{comment.createBy}}</a>
    <a-avatar slot="avatar" :src="require('@/assets/img/logo.png')" alt />
    <p slot="content">{{comment.content}}</p>
    <a class="fileDownload" v-for="(file, index) in comment.fileList"
        :href="file.path" :download="file.name"
        :key="index">
      <a-icon type="paper-clip" />
      {{file.name}}
    </a>
    <a-tag style="margin-top: 10px" color="blue">{{comment.types_dictText}}</a-tag>
    <a-tag color="cyan">下次拜访时间：{{comment.nextTime}}</a-tag>
    <p class="linkTitle" v-if="comment.businessList">关联商机</p>
    <a class="linkContent" v-for="(business,index) in (comment.businessList||[])"
       :key="index" @click="showBusiness(business)">
      <a-icon type="block"/>
      {{business.businessName}}
    </a>
    <p class="linkTitle" v-if="comment.contactsList">关联联系人</p>
    <a class="linkContent" v-for="(contacts,index) in (comment.contactsList||[])"
       :key="index" @click="showContacts(contacts)">
      <a-icon type="user"/>
      {{contacts.name}}
    </a>
    <a-tooltip slot="datetime">
      <span>{{comment.createTime}}</span>
    </a-tooltip>
  </a-comment>
</template>

<script>
import {Avatar as AAvatar,Comment as AComment } from 'ant-design-vue'

export default {
  name: "Comment",
  components: {
    AAvatar,
    AComment
  },
  props: {
    comment: ""
  },
  methods: {
    handlReply(msgId, msgUsername) {
      this.$emit("handleReply", { msgId, msgUsername });
    },
    showBusiness(record){
      this.$emit("showBusiness",record);
    },
    showContacts(record){
      this.$emit("showContacts",record);
    }
  }
}
</script>
<style lang="less">
  .comment {
    .ant-comment-inner {
      padding-bottom:0;
      .reply-to {
        padding-left: 5px;
        color: #409eff;
        font-weight: 500;
        font-size: 15px;
      }
    }
    .fileDownload {
      color: #00A0E9;
      display: block;
      width: fit-content;
      &:hover {
        color: #40a9ff;
        font-weight: bold;
      }
    }
    .linkTitle {
      color: #000c17;
      display: block;
      width: fit-content;
      font-weight: bold;
      margin: 10px 0 0;
    }
    .linkContent {
      color: #00A0E9;
      display: block;
      width: fit-content;
      &:hover {
        color: #40a9ff;
        font-weight: bold;
      }
    }
  }
</style>